<div class="goods_details">
    <goodsimgview></goodsimgview>

    <div class="goodsinfo">
        <div class="titlebar">
            商品信息
        </div>
        <hr />
        <div class="infobox">
            <div class="intro">
                {{goods_detail.intro}}
            </div>
        </div>
        <hr />
        <div class="saleinfo">
            <div class="item">状态：{{#if goods_detail.num==0}}缺货{{#else}}有货（{{goods_detail.num+goods_detail.unit}}）{{/if}}</div>
            <div class="item">销量：{{goods_detail.sale_num}}</div>
        </div>
    </div>
    <div class="bottomblock"></div>
    <div class="floatbtnbox">
        <button class="btn">立即购买</button>
        <button class="btn">加入购物车</button>
    </div>
</div>


<xmp type="tag" name="goodsimgview">
    <div class="goodsimg">
        <div class="bigbox">
            <div class="movebox">
                {{#each goods_detail.detail_img_urls}}
                <img class="bigimg" bind-src="{{$This}}" />{{/each}}
            </div>
            <div class="pricebox">
                <div class="itemleft">￥{{goods_detail.price_toFixed_2}}</div>
                <div class="itemright">
                    <a class="icon-star"></a>
                </div>
            </div>
        </div>
        <div class="smallbox">
            {{#each goods_detail.detail_img_urls }}
            <img name="{{$Index}}" class="smallimg" bind-src="{{$This}}?imageView/1/w/50/h/50" />{{/each}}
        </div>
    </div>
    <script type="text/vm">
        function(vm){ var movebox=vm.queryElement({ className:"movebox" })[0]; require(['jQuery'],function(){ var w=$(movebox).width(); $('.smallbox').on("click","img",function() { $(movebox).stop().animate({ marginLeft: -w * $(this).attr('name') }, 350); }) }) }
    </script>
</xmp>
